nshop-front-m/src/app/(public)/product/[...urlProduct]/page.tsx

import { notFound } from "next/navigation";
import { Suspense } from "react";
import {
  RelatedProductSkeleton,
} from "@/components/common/skeleton/ProductSkeleton";
import { BASE_SCHEMA_URL, PRODUCT_TYPE } from "@/utils/constants";
import { GET_PRODUCT_BY_URL_KEY } from "@/graphql";
import {serverGraphqlFetch} from "@utils/bagisto/index";
import type {
  ProductOption,
  SingleProductResponse,
  ProductMediaType,
} from "@components/catalog/type";
import { RelatedProductsSection } from "@components/catalog/product/RelatedProductsSection";
import { ProductMedia } from "@/app/(public)/product/_components/ProductMedia";
import { ProductInformation } from "@/app/(public)/product/_components/ProductInformation";
import { ProductDetail } from "@/app/(public)/product/_components/ProductDetail";
import ProductDescription from "../_components/ProductDescription";
import SwitchButton from "../_components/SwitchButton";
import ShopServicePanel from "../_components/ShopServicePanel";
import Recommend from "../_components/youmaylike/Recommend"
import { formatFlexibleVariants } from "@/utils/variantTools";

// export const dynamic = 'auto'
// // 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const dynamic = "force-dynamic";

//动态路由中的参数 -- params
export default async function ProductPage({
  params,
}: {
  params: Promise<{ urlProduct: string[] }>;
  searchParams: Promise<{ type: string }>;
}) {
  const { urlProduct } = await params;
  const fullPath = urlProduct.join("/");
  
  const resProductData = await serverGraphqlFetch<SingleProductResponse,{urlKey: string;}>({
      // urlKey, // 产品名称
      query: GET_PRODUCT_BY_URL_KEY, // gql查询语句
      variables:{ 
        urlKey: fullPath 
      },
      takeAuthorization: false,
      cache: 'no-cache'
      
  });
  console.log("productCustomerFeatures----------------------",resProductData);
  const product = resProductData.data?.product;
  const fetchProductError = resProductData.error;
  if (fetchProductError && fetchProductError.extensions.status === 404) return notFound();
  if(!product) throw new Error(fetchProductError?.message ?? 'Get product data failed');
 

  const questionTotal = 73;
  

  // JSON-LD数据格式，便于搜索引擎识别页面信息，利于seo
  const productJsonLd = {
    "@context": BASE_SCHEMA_URL,
    "@type": PRODUCT_TYPE,
    name: product?.name,
    description: product?.description,
    sku: product?.sku,
  };

  const mediaImgs = (product?.images?.edges ?? []).map(
    (edge: { node: ProductMediaType }) => {
      return edge.node;
    },
  );
  const productOptions: ProductOption[] = product?.productOptions
    ? JSON.parse(product?.productOptions)
    : [];

  const flexibleVariants = formatFlexibleVariants(product?.flexibleVariants);



  return (
    <>
      <script //SEO
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(productJsonLd),
        }}
        type="application/ld+json"
      />
      <div className="w-full">
          <ProductMedia mediaData={mediaImgs} />
      </div>

      <div className="">

          <ProductInformation
            key={product._id}
            productId={product._id}
            name={product?.name || ""}
            productOptions={productOptions}
            flexibleVariants={flexibleVariants}
            isSaleable={product.isSaleable}
            shortDescription={product.shortDescription || ""}
          />
          <ShopServicePanel />

         <ProductDescription   htmlString={product?.feature || ""} />
          <SwitchButton
            productId={"3792"} //|| String(product._id)

            questionTotal={questionTotal}
            questionList={["aaa"]}
          />
          <ProductDetail detail={product.description || ""} />
          
        <Recommend/>
      </div>
        
      <Suspense fallback={<RelatedProductSkeleton />}>
        <RelatedProductsSection fullPath={fullPath} />
      </Suspense>
    </>
  );
}